<script setup lang="ts">
import {ref, onMounted} from 'vue'
//通用分页数据
import {PageData} from "@/ts/CommonTypes";
//Api工具类
import * as apiUtil from "@/api/ApiUtils"
//权限工具类
import * as authUtil from "@/ts/AuthUtils";
//Api接口和类定义
import {
  apiDeleteById, apiQueryList, apiExportList,
  SysUnicodeVO, SysUnicodeQuery
} from "@/api/SysUnicodeApi"
//表单
import Form from "./form.vue"
import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  RedoOutlined,
  FormOutlined,
  DeleteOutlined,
  ClusterOutlined,
} from "@ant-design/icons-vue"

import {int2hex, hex2int} from "@/ts/UnicodeUtils";


const dataName = ref<string>("Unicode");

/**
 * 当前选中的id
 */
const currentId = ref<number | null>(null);

/**
 * 查询对象
 */
const query = ref<SysUnicodeQuery>(new SysUnicodeQuery());

/**
 * 分页数据
 */
const pageData = ref([]);

/**
 * 页面加载后执行的钩子函数
 */
onMounted(() => {
  handleQueryList();
  currentSize.value = sizeOption.value[0];
})

/**
 * 查询列表
 */
const handleQueryList = async () => {
  query.value.size = 500;
  try {
    const res = await apiQueryList(query.value)
    if (apiUtil.isSuccessed(res)) {
      for (let record of res.data) {
        record.label = record.id + "_" + record.description + "_" + record.capacity;
        record.value = record.title + "_" + record.id;
      }

      pageData.value = res.data;
    }
  } catch (error) {
    apiUtil.notifyError('查询失败', error.message);
  }
}
const currentData = ref({});

function handleChanged(value, option) {
  console.log(value, option);
  initUnicodeList(option);
  // currentData.value = option;
  console.log("initUnicodeList",currentData.value);
}

class UnicodeInfo {
  /**
   * 字符
   */
  name = "";
  /**
   * 编码
   */
  code = "";
}

function initUnicodeList(item): void {
  if (item.beginHex == undefined || item.endHex == undefined) {
    return;
  }

  item.list = new Array<UnicodeInfo>();
  for (let i = hex2int(item.beginHex); i <= hex2int(item.endHex); i++) {
    const name = int2hex(i);
    //0x0000 ~ 0xFFFF 编码表示
    let info: UnicodeInfo = JSON.parse(
        '{"code":"' + name + '","name": "' + "\\u" + name + '"}'
    );
    //0xFFFF 以后的编码表示
    if (name.length > 4) {
      const u = hex2int("10000");
      const high = hex2int("D800");
      const low = hex2int("DC00");
      //十进制 减 0x10000 , 转二进制
      let ubin = (i - u).toString(2);
      //高10位 加 0xD800
      const a = int2hex(
          high + parseInt(ubin.substring(0, ubin.length - 10), 2)
      );
      //低10位 加 0xDC00
      const b = int2hex(
          low + parseInt(ubin.substring(ubin.length - 10, ubin.length), 2)
      );
      //转换成【代理对】后，格式化成字符串
      info = JSON.parse(
          '{"code":"' + name + '","name": "' + "\\u" + a + "\\u" + b + '"}'
      );
    }

    //超过1000不再展示
    if (item.list.length >= 1000) {
      currentData.value = item;
      return;
    }
    item.list.push(info);
  }
  currentData.value = item;

}
const filterOption = (input: string, option: any) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const colSpan = ref("small");
const sizeOption = ref([
  {
    label:"小",
    value:"small",
    colSpan:1,
    itemStyle:"margin-top: 10px;font-size: 32px;"
  },
  {
    label:"中",
    value:"middle",
    colSpan:2,
    itemStyle:"margin-top: 10px;font-size: 64px;"
  }
])
const currentSize = ref({});
function handleSizeChanged(value,option){
  currentSize.value = option;
}

</script>

<template>
  <div style="padding: 20px">
    <div>
    分类：
    <a-select
        show-search
        :filter-option="filterOption"
        :options="pageData"
        style="width:300px"
        @change="handleChanged"
        placeholder="请选择Unicode分类"
    ></a-select>


    <span class="margin-left-20">大小：</span>
    <a-select
        v-model:value="colSpan"
        @change="handleSizeChanged"
        style="width:100px"
        :options="sizeOption">
    </a-select>

      <span class="margin-left-20">颜色：</span>
    </div>


    <div class="text-center">

      <a-row v-if="currentData.list">
        <a-col :span="currentSize.colSpan" v-for="unicode in currentData.list">
          <a-popover :title="'Unicode：' + unicode.code">
            <template #content>
              <div style="font-size: 128px;text-align: center;border: 1px #4A4B9D dashed;border-radius: 8px">{{unicode.name}}</div>
            </template>
            <div class="cursor-pointer" :style="currentSize.itemStyle">{{unicode.name}}</div>
          </a-popover>
        </a-col>
      </a-row>

    </div>

  </div>
</template>

<style scoped>

</style>
